﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>聊天系统-dmyang</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/layui/css/layui.css">
<style>

</style>
</head>
<body>

<div class="wrapper">
    <div class="nav">
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="">医院首页</a></li>
            <li class="layui-nav-item"><a href="">科室详情</a></li>
            <li class="layui-nav-item"><a href="">医院动态</a></li>
            <li class="layui-nav-item"><a href="">联系我们</a></li>
            <li class="layui-nav-item"><a href="">帮助</a></li>
            <li class="layui-nav-item layui-this"><a href="">工作区</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="picDiv">
            <img id="myImg" src="" style="display:block;clear: both;margin: auto;" />
        </div>
        <div id="formDiv">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">诊断意见</label>
                <div class="layui-input-block">
                    <textarea id="desc4treat" name="desc4treat" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" id="submitTreat">提交诊断</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 105px;"></div>
<footer>
        <ul class="share-group">
            <li>友情链接</li>
            <li>友情链接</li>
            <li>友情链接</li>
            <li>友情链接</li>
            <li>友情链接</li>
        </ul>
        <div class="copy">
            &copy 医科大学附属医院 - 2018
        </div>
    </footer>
</div>

<button id="over-treat" class="over-treat">结束诊断</button>

<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script>

if(!/^http(s*):\/\//.test(location.href)){
  alert('请部署到localhost上查看该演示');
}
layui.use(['layer','layim'], function(layim){
    var layer = layui.layer,
        layim = layui.layim;
    layim.config({
        init: {
            //配置当前登录用户信息  从全域Session取
            mine: {
                "username": "${sessionScope.name}" //我的昵称
                ,"id": "${sessionScope.pk}" //我的ID
                ,"status": "online" //在线状态 online：在线、hide：隐身
                ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                ,"avatar": "//res.layui.com/images/fly/avatar/00.jpg" //我的头像
            }
        }
        //开启客服模式
        ,brief: true
        ,minRight:'10px'
        //上传图片接口
        ,uploadImage: {
            url: '/upload/img' //（返回的数据格式见下文）
            ,type: '' //默认post
        }

    });

    $("#submitTreat").click(function () {

        var data = $("body").data("nowChatUser");
        var dat={};
        dat["from"]="${sessionScope.pk}";
        dat["fromName"]="${sessionScope.name}";
        dat["to"]=data.data.id;
        dat["text"]="<img src="+$("#myImg")[0].src+"\/>"+"<br />"+ $('#desc4treat').val();
        dat['fromAvatar']=data.data.avatar;
        websocket.send(JSON.stringify(dat));
        //$(".layim-chat-textarea textarea:first-child").text("<img src="+$("#myImg")[0].src+"\/>"+"<br />"+ $('#desc4treat').val());
        //$(".layim-send-btn").trigger("click");//模拟点击发送键
    });

    layim.on('chatChange', function(obj){
        //console.log(obj);
        $("body").data("nowChatUser",obj);
        //alert("窗口切换了")
    });

    //往框中添加要发送的内容
    //$(".layim-chat-textarea textarea:first-child").text("要发生的内容哈哈哈。");
    //$(".layim-send-btn").trigger("click");//模拟点击发送键
    //alert(str);

    //监听发送消息
    layim.on('sendMessage', function(data){
        var To = data.to;
        //$("body").data("To",To)
        //用websocket发送出去
        var dat={};
        dat["from"]="${sessionScope.pk}";
        dat["fromName"]="${sessionScope.name}";
        dat["to"]=To.id;
        dat["text"]=data.mine.content;
        dat['fromAvatar']=data.mine.avatar;
        websocket.send(JSON.stringify(dat));
        //console.log("已发送:"+data.mine.content+"给id为："+To.id+"的用户");
        //点击图片事件
        $('.layui-layim-photos').click(function(){
            layer.msg("将进入诊断模式，聊天窗口将隐藏，可在屏幕下方再次打开聊天窗口。")
            //隐藏当前聊天窗口，进入诊断页面（主页）
            layim.setChatMin(); //收缩聊天面板
            $('#myImg').attr('src','http://ouxglh8gn.bkt.clouddn.com/pic-002.jpg');
        });
    });

    //websocket编程 start
    // 指定websocket路径
    var websocket;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/ws?pk=${sessionScope.pk}");
    } else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://localhost:8080/ws${sessionScope.pk}");
    } else {
        websocket = new SockJS("http://localhost:8080/ws/sockjs${sessionScope.pk}");
    }
    websocket.onmessage = function(event) {
        var data=JSON.parse(event.data);
        if(data.from!="-1"&&data.from!="-2"){//用户或者群消息

            var obj = {};
            obj = {
                username: data.fromName
                ,avatar: data.fromAvatar
                ,id: data.from
                ,type: "kefu"
                ,content: data.text
            }
            layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
            layim.getMessage(obj);

        }else if(data.from=="-1"){//上线消息
            if(data.text!="${sessionScope.name}")
            {
//                onlineusers();
//                alert(data.text+"上线了");
            }
        }else if(data.from=="-2"){//下线消息
            if(data.text!="${sessionScope.username}")
            {
            }
        }
    };
    function waitPatList() {
        $.post("/doctor/waitPatList",{"reqPk":"${sessionScope.pk}"},function(data){
            if ( $("body").data("d") != data){
                var obj = JSON.parse(data)
                for(var i=0;i<obj.length;i++){
                    layim.chat(obj[i]);
                }
                if( obj.length > 0 ){
                    //查到需要咨询的患者后，停止定时器。
                    window.clearInterval(timer_show_tip);
                    //$("#over-treat").css("display:block");
                }
            }

            $("body").data("d",data);
        });
    }
    //每一秒查询一次有无需要咨询的患者。
    var timer_query_pat = window.setInterval(function(){
        waitPatList();
    },3000)
    var timer_show_tip = window.setInterval(function(){
        layer.msg('正在为您匹配患者，请稍后……');
    },5000)




    var timer_pic_event = window.setInterval(function(){
        //点击图片事件
        $('.layui-layim-photos').click(function(){
            layer.msg("将进入诊断模式，聊天窗口将隐藏，可在屏幕下方再次打开聊天窗口。")
            //隐藏当前聊天窗口，进入诊断页面（主页）
            layim.setChatMin(); //收缩聊天面板
            $('#myImg').attr('src','http://ouxglh8gn.bkt.clouddn.com/pic-002.jpg');
        });
    },1000);
    $("#over-treat").click(function () {
        $.post("/doctor/stopTreat",{"reqPk":"${sessionScope.pk}"},function(data){
            //TODO
            window.location.href="/doctor/initDoc";
        });
    });
    //websocket编程 end


});

</script>
</body>
</html>
